import { Modal, Form, Input, Button, Table, Popconfirm, Space, Select, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import './Project_management.scss';
import Add from './Add';
import Modify from './Modify';
import http from '../../utils/http';
import timestampToTime from '../../utils/dateTo';

const { Option } = Select;

const Project_management = () => {
  const [form] = Form.useForm();
  const [searchKey, setKey] = useState({});
  const [isshowAdd, setAdd] = useState(false);
  const [isshowModify, setModify] = useState(false);
  const [isEditlVisible, setEdit] = useState(false);
  const [editData, setEditData] = useState({});
  const [selectedData, setSelected] = useState([]);
  const columns = [
    {
      title: '项目名称',
      dataIndex: 'proName',
    },
    {
      title: '项目编号',
      dataIndex: 'proNum',
    },
    {
      title: '项目类型',
      dataIndex: 'proType',
    },
    {
      title: '项目地址',
      dataIndex: 'proAddr',
    },
    {
      title: '用户类型',
      dataIndex: 'usType',
    },
    {
      title: '项目状态',
      dataIndex: 'proState',
    },
    {
      title: '预计上线时间',
      dataIndex: 'proTime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => (
        <Space size="middle">
          <a href="#" onClick={() => { openEditBox(record) }}>修改</a>
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => { confirm(record) }}
            okText="Yes"
            cancelText="No"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  const [allData, setAllData] = useState([]);
  const getAllData = (searchKey = {}) => {
    console.log(searchKey)
    http({
      url: '/project/projectInfo',
      method: 'get',
      params: searchKey
    }).then((res) => {
      if (res.code == 200) {
        let arr = [...res.data.records];
        arr.forEach((item) => {
          item.key = item.proId;
          item.proTime = timestampToTime(item.proTime);
          item.proStarttime = timestampToTime(item.proStarttime);
          item.proState == 0 ? item.proState = '已竣工' : item.proState = '建设中';
          item.usType == 0 ? item.usType = '科技园区' : item.usType = '娱乐城';
          switch (item.proType) {
            case 0: item.proType = '软件集成'; break;
            case 1: item.proType = '硬件集成'; break;
            case 2: item.proType = '软硬一体'; break;
          }
        });
        setAllData(arr);
        console.log(arr)
      } else {
        message.error('服务端出错，请联系管理员');
      }

    })
  }

  useEffect(() => {
    getAllData();
  }, [])

  const resize = () => {
    form.resetFields();
    setKey({});
    getAllData();
  }
  const isSelect = () => {
    if (selectedData.length > 0) {
      setEdit(true);
    } else {
      message.warning('还未选择删除项');
    }
  }

  const openEditBox = (record) => {
    setEditData({ ...record });
    setModify(true);
  }
  const delData = (list) => {
    let arr = [];
    list.forEach((item) => {
      arr.push(item.proId)
    })
    http({
      url: '/project/deleteProjectInfo',
      method: 'post',
      data: arr
    }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        message.success('删除成功！');
        getAllData();
        setSelected([]);
      } else {
        message.error('服务端出错，请联系管理员');
      }
    })
  }
  const confirm = (record) => {
    console.log(record)
    let arr = [];
    arr.push(record);
    delData(arr)
  }
  const batchDel = () => {
    console.log(selectedData);
    setEdit(false);
    delData(selectedData);
  }

  const projectManagement = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelected(selectedRows)
    },
    getCheckboxProps: (record) => ({
      name: record.name,
    }),
  };
  const handleproType = (value) => {
    let obj = { ...searchKey };
    obj.proState = value;
    setKey(obj)
  }
  return <div className='projectContent'>
    <Modal visible={isEditlVisible} onOk={batchDel} onCancel={() => { setEdit(false) }} width={250} cancelText='取消' okText='确定' style={{ top: '40%' }}>
      <div><ExclamationCircleOutlined style={{ color: 'rgb(255,153,0)' }} /><span>您确认删除所选吗？</span></div>
    </Modal>
    {isshowAdd ? <Add isshowAdd={isshowAdd} setAdd={setAdd} getAllData={getAllData} /> : null}
    {isshowModify ? <Modify isshowModify={isshowModify} setModify={setModify} getAllData={getAllData} editData={editData} /> : null}
    <Form form={form} name="horizontal_login" layout="inline" className='title'>
      <div className='kuai'>
        <span></span>
        <span>项目信息管理</span>
      </div>
      <Form.Item className='btn'>
        <div>
          <Button className='cha'
            type="primary"
            onClick={() => { setAdd(true) }}>新增</Button>
          <Button className='resize' onClick={isSelect} type="primary">批量删除</Button>
        </div>
      </Form.Item>
    </Form>
    <div className='biao'>
      <Form form={form} name="horizontal_login" layout="inline" className='Role'>
        <Form.Item
          name="proName"
          label='项目名称'
        >
          <Input value={searchKey.proName} placeholder='请输入项目名称' onChange={(e) => {
            let obj = { ...searchKey };
            obj.proName = e.target.value;
            setKey(obj)
          }} />
        </Form.Item>
        <Form.Item
          name="proNum"
          label='项目编号'
        >
          <Input value={searchKey.proNum} type='number' placeholder='请输入项目编号' onChange={(e) => {
            let obj = { ...searchKey };
            obj.proNum = e.target.value;
            setKey(obj)
          }} />
        </Form.Item>
        <Form.Item
          name="proState"
          label='项目状态'
        >
          <Select placeholder="请选择" style={{ width: 120 }} onChange={handleproType}>
            <Option value={1}>建设中</Option>
            <Option value={0}>已竣工</Option>
          </Select>
        </Form.Item>
        <Form.Item className='btn'>
          <div>
            <Button className='cha'
              type="primary"
              onClick={() => {
                getAllData(searchKey);
              }}>查询</Button>
            <Button className='resize' onClick={resize} type="primary">重置</Button>
          </div>

        </Form.Item>
      </Form>
      <Table className='table1'
        rowSelection={{
          ...projectManagement,
        }}
        columns={columns}
        dataSource={allData}
      />
    </div>
  </div>
};

export default Project_management;
